<template>
  <div class="video">
    <div class="tools">
      <el-input v-model="search.cameraName" placeholder="请输入视频名称" size="large">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <list
      :list="listData"
      :status="baseSearch.status"
      :loading="loading"
      @scrollLoad="scrollLoad"
    />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import list from './list.vue'
import { getCameraList } from '@/api/bvideo'
import { useListData } from '@/hooks/useListData'

// 定义搜索参数的类型
interface SearchParams {
  cameraName: string
}

// 使用列表数据 hook
const { search, baseSearch, listData, loading, scrollLoad } = useListData<SearchParams>({
  fetchData: getCameraList,
  initialSearchParams: {
    location: '',
    name: ''
  },
  enableAutoRefresh: true,
  refreshInterval: 60000
})
</script>

<style lang="scss" scoped>
.video {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  .tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 16px;
  }
}
</style>
